<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>面向对象选项卡</title>
    <link rel="stylesheet" href="./面向对象选项卡.css" />
  </head>

  <body>
    <main>
      <div class="tab" id="tab">
        <nav class="fisrstnav">
          <ul class="hd">
            <li class="active">
              <span class="text">测试1</span><span class="delete">×</span>
            </li>
            <li>
              <span class="text">测试2</span><span class="delete">×</span>
            </li>
            <li>
              <span class="text">测试3</span><span class="delete">×</span>
            </li>
          </ul>
          <div class="tabAdd">
            <span>+</span>
          </div>
        </nav>
        <div class="bd">
          <section class="active">测试1</section>
          <section>测试2</section>
          <section>测试3</section>
        </div>
      </div>
    </main>
    <script src="./面向对象选项卡.js"></script>
  </body>
</html>
